{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>漂浮消息</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>漂浮消息允许在页面指定位置展示一个消息浮动在已有内容之上。此消息可以设置为自动关闭或者让用户自行决定关闭。漂浮消息不会打断用户当前操作，一般用于提示后台操作，或者针对用户的全局操作作出及时回应。</p></article>




<section><header><h3>示例</h3></header><article><p>漂浮消息可以设置图标，并且可以决定是否显示关闭按钮。</p><div class="example">
  <button class="btn btn-primary show-messager" type="button" data-content="这是一个浮动消息。" data-icon="bell" data-time="100000">显示漂浮消息</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 点击按钮时显示漂浮消息</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'.btn'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'这是一个浮动消息。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bell'</span><span class="pln"> </span><span class="com">// 定义消息图标</span><span class="pln">
    </span><span class="pun">}).</span><span class="pln">show</span><span class="pun">();</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>




<section><header><h3>显示位置</h3></header><article><p>提供7个预设的显示位置。</p><div class="example">
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="top">上方</button>
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="bottom">下方</button>
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="top-left">左上</button>
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="top-right">右上</button>
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="bottom-left">左下</button>
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="bottom-right">右下</button>
  <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="center">中间</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'这是一个浮动消息。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'heart'</span><span class="pun">,</span><span class="pln">
    placement</span><span class="pun">:</span><span class="pln"> </span><span class="str">'center'</span><span class="pln"> </span><span class="com">// 定义显示位置</span><span class="pln">
</span><span class="pun">}).</span><span class="pln">show</span><span class="pun">();</span></code></pre></article></section>




<section><header><h3>颜色主题</h3></header><article><p>提供 8 种预设颜色主题。</p><div class="example">
  <style>.messager-example {position: relative; margin-bottom: 10px; cursor: pointer;}</style>
  <div class="messager messager-example messager-default"><div class="messager-content">普通提示消息</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-primary" data-type="info"><div class="messager-content">提示消息：主要</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-info" data-type="info"><div class="messager-content"><i class="icon-info-sign"></i> 提示消息：信息</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-danger" data-type="danger"><div class="messager-content"><i class="icon-exclamation-sign"></i>提示消息：危险</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-success" data-type="success"><div class="messager-content"><i class="icon-ok-sign"></i> 提示消息：成功</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-warning" data-type="warning"><div class="messager-content"><i class="icon-warning-sign"></i> 提示消息：警告</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-important" data-type="important"><div class="messager-content">提示消息：重要</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
  <div class="messager messager-example messager-special" data-type="special"><div class="messager-content">提示消息：特别</div><div class="messager-actions"><button type="button" class="close action">×</button></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'提示消息：成功'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pln"> </span><span class="com">// 定义颜色主题</span><span class="pln">
</span><span class="pun">}).</span><span class="pln">show</span><span class="pun">();</span></code></pre></article></section>

















<section><header><h3>自定义操作按钮</h3></header><article><p>默认会在右侧显示关闭按钮，如果需要禁用关闭按钮，将 <code>close</code> 选项设置为 <code>false</code>。</p><div class="example">
  <button class="btn btn-primary show-messager" type="button" data-fade="false" data-scale="false" data-content="此消息无法关闭，5秒后自动关闭" data-time="5000" data-close="false">禁用关闭按钮</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'此消息无法关闭，5秒后自动关闭'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    close</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="com">// 禁用关闭按钮</span><span class="pln">
</span><span class="pun">}).</span><span class="pln">show</span><span class="pun">();</span></code></pre><p>通过 <code>actions</code> 对象来自定义一组操作。</p><div class="example">
  <div class="messager messager-example messager-success" data-type="success" data-actions="{&quot;cancel&quot;: {&quot;icon&quot;: &quot;undo&quot;, &quot;text&quot;: &quot;撤销&quot;}}"><div class="messager-content"><i class="icon-ok-sign"></i> 你的邮件已成功发送。</div><div class="messager-actions"><button type="button" class="action action-cancel"><i class="icon-undo"></i> 撤销</button><button type="button" class="close action">×</button></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'你的邮件已成功发送。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">,</span><span class="pln">
    close</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    actions</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
        name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'undo'</span><span class="pun">,</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'undo'</span><span class="pun">,</span><span class="pln">
        text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'撤销'</span><span class="pun">,</span><span class="pln">
        action</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">  </span><span class="com">// 点击该操作按钮的回调函数</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'你点击了撤销按钮。'</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}]</span><span class="pln">
</span><span class="pun">});</span></code></pre><p><code>actions</code> 参数为一个包含若干个操作定义对象，每个操作定义对象可取的属性值如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>属性</th>
      <th>可用值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>name</code></td>
      <td><code>'close'</code></td>
      <td>该操作的名称，要求为全局唯一的全英文字符串</td>
    </tr>
    <tr>
      <td><code>icon</code></td>
      <td><code>ok-sign</code></td>
      <td>该操作的图标</td>
    </tr>
    <tr>
      <td><code>text</code></td>
      <td><code>'确认'</code></td>
      <td>操作显示的文本</td>
    </tr>
    <tr>
      <td><code>html</code></td>
      <td><code>'&lt;strong&gt;好&lt;/strong&gt;'</code></td>
      <td>设置为操作按钮内的 HTML 代码，如果指定该属性，则 <code>icon</code> 和 <code>text</code> 属性会被忽略</td>
    </tr>
    <tr>
      <td><code>action</code></td>
      <td><code>[function]</code></td>
      <td>可选，当点击操作按钮时要调用的回调函数</td>
    </tr>
  </tbody>
</table></div><p><code>icon</code>、<code>text</code>、<code>html</code> 属性至少需要设置一项，否则操作按钮不可见。</p><p>在操作定义对象的操作回调函数 <code>action</code> 中返回 <code>false</code> 来取消点击操作后的隐藏操作。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'你的邮件已成功发送。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">,</span><span class="pln">
    close</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    actions</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
        name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'undo'</span><span class="pun">,</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'undo'</span><span class="pun">,</span><span class="pln">
        text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'撤销'</span><span class="pun">,</span><span class="pln">
        action</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">  </span><span class="com">// 点击该操作按钮的回调函数</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 通过返回 false 来阻止消息被点击时隐藏</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}]</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>如果在 <code>actions</code> 内已经定义 <code>name</code> 为 <code>'close'</code> 的操作，则 <code>close</code> 选项会被忽略。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'你的邮件已成功发送。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">,</span><span class="pln">
    close</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 此选项会被忽略，因为已经在 actions 选项中指定了 name 值为 close 的操作</span><span class="pln">
    actions</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
        name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'close'</span><span class="pun">,</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'remove'</span><span class="pln">
    </span><span class="pun">}]</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>监听点击操作另一个方法是使用 <code>onAction</code> 选项。</p><pre class="prettyprint prettyprinted" style=""><code><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'你的邮件已成功发送。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">,</span><span class="pln">
    actions</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
        name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'undo'</span><span class="pun">,</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'undo'</span><span class="pln">
    </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'close'</span><span class="pun">,</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'remove'</span><span class="pln">
    </span><span class="pun">}],</span><span class="pln">
    onAction</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> action</span><span class="pun">,</span><span class="pln"> messager</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">name </span><span class="pun">===</span><span class="pln"> </span><span class="str">'undo'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'你点击了撤销按钮。'</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">name </span><span class="pun">===</span><span class="pln"> </span><span class="str">'close'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'你点击了关闭按钮。'</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>



<section><header><h3>禁用动画效果</h3></header><article><div class="example">
  <button class="btn btn-primary show-messager" type="button" data-fade="false" data-scale="false" data-content="此消息没有动画效果。" data-icon="bell">禁用动画效果</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'此消息没有动画效果。'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    fade</span><span class="pun">:</span><span class="pln">  </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">  </span><span class="com">// 禁用渐隐效果</span><span class="pln">
    scale</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln">   </span><span class="com">// 禁用缩放动画</span><span class="pln">
</span><span class="pun">}).</span><span class="pln">show</span><span class="pun">();</span></code></pre></article></section>




































<script>
$(function(){
  afterPageLoad();
});
function afterPageLoad() {
    $('#pageContent .show-messager').on('click', function() {
        var $this = $(this);
        var data = $this.data('zui.messager');
        if(data) {
            data.show(new Date());
        }
        else {
            var options = $this.data();
            if(typeof options.actions === 'string') options.actions = $.parseJSON(options.actions);
            $this.data('zui.messager', new $.zui.Messager(options.content, options).show());
        }
    });

    $('#pageContent .messager-example').click(function() {
        var $this = $(this);
        options = $this.data();
        if(typeof options.actions === 'string') options.actions = $.parseJSON(options.actions);
        new $.zui.Messager($this.find('.messager-content').html(), options).show();
    });
}
</script><section><header><h3>如何使用</h3></header><article><p>创建一个 <code>Messager</code> 实例，并调用 <code>show()</code> 和 <code>hide()</code> 方法来显示或隐藏消息。</p><h4>创建 Messager 实例</h4><p>创建 Messager 实例方法调用形式：</p><ul>
<li><strong class="code text-danger">new $.zui.Messager()</strong></li>
<li><strong class="code text-danger">new $.zui.Messager(message)</strong></li>
<li><strong class="code text-danger">new $.zui.Messager(options)</strong></li>
<li><strong class="code text-danger">new $.zui.Messager(message, options)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>message</code>：用于设定要进行显示的消息内容；</li>
<li><code>options</code>：初始化选项；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> myMessager </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'Hello, messager!'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>显示消息</h4><p>使用 Messager 实例方法 <code>show()</code> 来显示消息，该方法可用形式有：</p><ul>
<li><strong class="code text-danger">show()</strong></li>
<li><strong class="code text-danger">show(message)</strong></li>
<li><strong class="code text-danger">show(callback)</strong></li>
<li><strong class="code text-danger">show(message, callback)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>message</code>：用于设定要进行显示的消息内容；</li>
<li><code>callback</code>：消息显示之后的回调函数；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 创建 Messager 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myMessager </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">({</span><span class="pln">type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">});</span><span class="pln">

myMessager</span><span class="pun">.</span><span class="pln">show</span><span class="pun">(</span><span class="str">'Hello, messager'</span><span class="pun">);</span></code></pre><p>你可以在任何时候调用 <code>show()</code> 方法来显示消息，如果消息已经显示，则会更新所显示的内容。</p><h4>同时显示多条消息</h4><p>如果你要同时显示多条消息，只需要使用不同的 Messager 实例，然后调用各自的 <code>show()</code> 方法即可。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 创建 Messager 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myMessager1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'消息一'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myMessager2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'消息二'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 显示消息一</span><span class="pln">
myMessager1</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 显示消息二</span><span class="pln">
myMessager2</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span></code></pre><h4>隐藏消息</h4><p>使用 Messager 实例方法 <code>hide()</code> 来隐藏消息，该方法可用形式有：</p><ul>
<li><strong class="code text-danger">hide()</strong></li>
<li><strong class="code text-danger">hide(callback)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>callback</code>：消息隐藏之后的回调函数；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 创建 Messger 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myMessager </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'Hello, messager!'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'success'</span><span class="pun">,</span><span class="pln">
    time</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="com">// 不进行自动隐藏</span><span class="pln">
</span><span class="pun">});</span><span class="pln">

</span><span class="com">// 先显示消息</span><span class="pln">
myMessager</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 5 秒之后隐藏消息</span><span class="pln">
setTimeout</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    myMessager</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">();</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="lit">5000</span><span class="pun">);</span></code></pre><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr><th>方法</th><th>参数</th><th>定义</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>构造函数</td>
      <td><em>   <code>message</code>，需要显示的消息文本，支持html；
</em>   <code>options</code>一个参数对象，具体参数定义见后续章节。</td>
      <td>创建新的Messager实例。</td>
    </tr>
    <tr>
      <td><code>show</code></td>
      <td><code>message</code>（可选），在显示时重新设置消息文本。</td>
      <td>立即显示消息</td>
    </tr>
    <tr>
      <td><code>hide</code></td>
      <td>无</td>
      <td>立即隐藏消息</td>
    </tr>
  </tbody>
</table></div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用jQuery对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> msg </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Messager</span><span class="pun">(</span><span class="str">'消息内容'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">placement</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bottom'</span><span class="pun">});</span><span class="pln">

</span><span class="com">// 显示消息</span><span class="pln">
msg</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 隐藏消息</span><span class="pln">
msg</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">();</span></code></pre><p>如果确定消息实例不再使用，可以调用 <code>destroy()</code> 方法来销毁消息。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 销毁消息</span><span class="pln">
myMsg</span><span class="pun">.</span><span class="pln">destroy</span><span class="pun">();</span></code></pre><h4>快速显示</h4><p>使用 <code>$.zui.messager</code> 实例的 <code>show()</code> 方法来即时显示一个漂浮消息。</p><p>调用<code>$.zui.messager.show()</code>或者<code>$.zui.messager.show()</code>之后立即显示并返回新创建的<code>Messager</code>实例。可以使用返回的实例来手动执行<code>hide</code>方法隐藏此消息。</p><p><code>show()</code>方法提供两个参数，定义于<code>Messager</code>构造函数参数定义相同。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用jQuery对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> msg </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">messager</span><span class="pun">.</span><span class="pln">show</span><span class="pun">(</span><span class="str">'消息内容'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">placement</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bottom'</span><span class="pun">});</span><span class="pln">

</span><span class="com">// 隐藏消息</span><span class="pln">
</span><span class="com">// msg.hide();</span></code></pre><h4>选项</h4><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>参数</th>
      <th>可选值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>type</code></td>
      <td><code>'default'</code>(默认)|<code>'primary'</code>|<code>'success'</code>|<code>'info'</code>|<code>'warning'</code>|<code>'danger'</code>|<code>'important'</code>|<code>'special'</code></td>
      <td>不同类型的消息对应使用不同的颜色展示。</td>
    </tr>
    <tr>
      <td><code>placement</code></td>
      <td><code>'top'</code>(默认)|<code>'bottom'</code>|<code>'top-left'</code>|<code>'top-right'</code>|<code>'bottom-left'</code>|<code>'bottom-right'</code>|<code>'center'</code></td>
      <td>决定消息显示的位置。</td>
    </tr>
    <tr>
      <td><code>time</code></td>
      <td>表示时间延迟，单位毫秒，默认为4000</td>
      <td>自显示之后超过此时间设定会自动隐藏消息。如果设置为0则不会自动隐藏。</td>
    </tr>
    <tr>
      <td><code>message</code></td>
      <td>默认为 <code>null</code></td>
      <td>使用选项来设置要显示的消息。</td>
    </tr>
    <tr>
      <td><code>parent</code></td>
      <td><code>'body'</code></td>
      <td>一个jquery选择器，决定消息内容DOM的父节点。</td>
    </tr>
    <tr>
      <td><code>icon</code></td>
      <td><code>null</code></td>
      <td>可以额外指定一个图标在消息文本之前显示，图标定义参见“控件&gt;图标”章节。</td>
    </tr>
    <tr>
      <td><code>close</code></td>
      <td><code>true</code>(默认)|<code>false</code></td>
      <td>如果为<code>true</code>，则在消息右侧显示一个关闭按钮，用户可以自行隐藏消息。</td>
    </tr>
    <tr>
      <td><code>fade</code></td>
      <td><code>true</code>(默认)|<code>false</code></td>
      <td>如果为<code>true</code>，则在显示和隐藏消息时使用渐隐渐显的动画效果。</td>
    </tr>
    <tr>
      <td><code>scale</code></td>
      <td><code>true</code>(默认)|<code>false</code></td>
      <td>如果为<code>true</code>，则在显示和隐藏消息时使用缩放的动画效果。</td>
    </tr>
    <tr>
      <td><code>actions</code></td>
      <td><code>[{action...}]</code>，默认不设置</td>
      <td>使用包含操作定义对象的数组来自定义操作按钮。</td>
    </tr>
    <tr>
      <td><code>onAction</code></td>
      <td><code>function(actionName, action, messager)</code>，默认不设置</td>
      <td>当点击操作按钮时的回调函数，该回调函数的 <code>this</code> 指向当前所点击的按钮，参数定义如下：

<em>   <code>actionName</code>：操作的名称；
</em>   <code>action</code>：操作定义对象；
*   <code>messager</code>：当前的漂浮消息实例。</td>
    </tr>
    <tr>
      <td><code>cssClass</code></td>
      <td><code>'my-messager'</code>，默认不设置</td>
      <td>为 <code>.messager</code> 追加额外的 CSS 类</td>
    </tr>
    <tr>
      <td><code>contentClass</code></td>
      <td><code>'my-messager-content'</code>，默认不设置</td>
      <td>为 <code>.messager-content</code> 追加额外的 CSS 类</td>
    </tr>
    <tr>
      <td><code>show</code></td>
      <td><code>true</code> | <code>false</code>(默认)</td>
      <td>是否在初始化之后立即显示消息。</td>
    </tr>
  </tbody>
</table></div></article></section></div>
</section>
{/block}